<template>
    <div class="main">
        <mine-title>我的模型</mine-title>
        <div class="content">
            <div class="block-header">
                <div class="block-header-left">
                    <mine-button type="primary" secondary @click="loadData()"
                        ><i class="iconfont icon-reset-line"></i
                        >刷新</mine-button
                    >
                </div>
                <div class="block-header-right"></div>
            </div>
            <el-form
                ref="form"
                :inline="true"
                :model="listQuery"
                class="demo-form-inline"
            >
                <el-row :gutter="2">
                    <el-col :xs="12" :sm="8" :md="8" :lg="3">
                        <el-form-item label="">
                            <el-input
                                v-model="listQuery.id"
                                placeholder="模型ID"
                                size="small"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="3">
                        <el-form-item label="">
                            <el-input
                                v-model="listQuery.modelName"
                                placeholder="模型名称"
                                size="small"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="2">
                        <el-form-item label="">
                            <el-select
                                v-model="listQuery.applicationTypes"
                                placeholder=""
                                multiple
                                disabled
                                size="small"
                                collapse-tags
                            >
                                <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="4">
                        <el-form-item label="">
                            <el-select
                                v-model="listQuery.status"
                                placeholder="发布状态"
                                multiple
                                size="small"
                                collapse-tags
                            >
                                <el-option
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="4">
                        <el-form-item label="">
                            <el-select
                                v-model="listQuery.modelTypes"
                                placeholder="模型类型"
                                multiple
                                size="small"
                                collapse-tags
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="3">
                        <el-form-item label="">
                            <el-input
                                v-model="listQuery.projectName"
                                placeholder="关联项目"
                                size="small"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="8" :md="8" :lg="3">
                        <el-form-item label="">
                            <el-input
                                v-model="listQuery.materialSetName"
                                placeholder="数据集"
                                size="small"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
                :max-height="300"
            >
                <el-table-column
                    prop="id"
                    label="模型ID"
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="modelName"
                    label="模型名称"
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="applicationType"
                    label="应用类型"
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="status"
                    label="发布状态"
                    :formatter="
                        (row, column, cellValue, index) => {
                            return cellValue === 'unpublish'
                                ? '未发布'
                                : '已发布';
                        }
                    "
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="modelType"
                    label="模型类型"
                    :formatter="
                        (row, column, cellValue, index) => {
                            return this.renderClassify(cellValue);
                        }
                    "
                    show-overflow-tooltip
                />
                <el-table-column align="center" label="模型效果">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDetail(scope.$index, scope.row)"
                            >查看详情</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="关联项目"
                    show-overflow-tooltip
                />
                <el-table-column
                    prop="materialSetName"
                    label="数据集"
                    show-overflow-tooltip
                />
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <mine-button
                            size="mini"
                            type="text"
                            @click="handleViewDetail(scope.$index, scope.row)"
                            >查看模型详情</mine-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <mine-pagination
                @numberChange="numberChange"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
            >
            </mine-pagination>
        </div>
    </div>
</template>

<script>
import request from "@/modules/index/utils/request";
import { classifyList } from "@/utils/common";
import qs from "qs";
import _ from "lodash";
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1, //table当前页数
            listQuery: {
                id: "",
                modelName: "",
                applicationTypes: ["云服务"],
                version: "",
                status: [],
                modelTypes: [],
                projectName: "",
                materialSetName: ""
            },
            loading: true,
            options: classifyList.map(item => {
                return { value: item.name, label: item.text };
            }),
            options1: [{ value: "云服务", label: "云服务" }],
            options2: [
                { value: "published", label: "已发布" },
                { value: "unpublish", label: "未发布" }
            ]
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData(flag) {
            if (flag) {
                this.currentPage = 1;
            }
            const { currentPage, listQuery } = this;
            const {
                id,
                modelName,
                applicationTypes,
                version,
                status,
                modelTypes,
                projectName,
                materialSetName
            } = listQuery;

            let data = qs.parse({
                page: currentPage,
                pageSize: 10,
                id: id,
                modelName: modelName,
                applicationTypes: applicationTypes,
                version: version,
                status: status,
                modelTypes: modelTypes,
                projectName: projectName,
                materialSetName: materialSetName
            });
            this.loading = true;
            request({
                url: "/training-model-data/search-page", //接口
                method: "post",
                data: data
            }).then(response => {
                let result = response.data;
                if (!result.success) {
                    return;
                }
                let data = result.data;
                this.tableData = data.list;
                this.total = data.rowCount;
                this.loading = false;
            });
        },
        clear() {
            this.$refs.form.resetFields();
            this.loadData(true);
        },
        refreshData() {
            this.loadData();
        },
        reSetData() {
            this.listQuery = {
                id: "",
                modelName: "",
                applicationTypes: ["云服务"],
                version: "",
                status: [],
                modelTypes: [],
                projectName: "",
                materialSetName: ""
            };
            this.page = 1;
            this.refreshData();
        },
        formatBtn(row, column, cellValue, index) {
            return cellValue;
        },
        async handleDetail(index, row) {
            let data = null;
            try {
                data = await this.loadPro(row.projectId);
            } catch (err) {
                data = null;
            }
            this.$router.push({
                name: "proEdit",
                params: { data: data, isToModelResult: true }
            });
        },
        loadPro(id) {
            return new Promise((resolve, reject) => {
                request({
                    url: `/project/${id}`, //接口
                    method: "get"
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }
                            reject(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        handleViewDetail(index, row) {
            this.$router.push({
                name: "proDetail",
                query: { id: row.projectId }
            });
        },
        handleCurrentChange(value) {
            this.page = value;
            this.loadData();
        },
        renderClassify(value) {
            let result = "";
            result = _.find(classifyList, { name: value })
                ? _.find(classifyList, { name: value }).text
                : "";
            return result;
        },
        numberChange(val) {
            switch (val.flag) {
                case "pageSize":
                    this.pageSize = val.pageSize;
                    this.loadData(true);
                    break;
                case "currentPage":
                    this.currentPage = val.currentPage;
                    this.loadData(false);
                    break;
                default:
                    break;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.demo-form-inline {
    margin-bottom: 22px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }
}
</style>
